<template>
	<view>
		<view class="header">
			<span class="all">全部<icon-svg icon-class="icon-test6" /></span>
		</view>
		
		<view class="search">
			<uni-search-bar placeholder="搜索标题、申请单号" radius="100"></uni-search-bar>
		</view>
		
<!-- 		<view class="btn">
			<view class="tag"> -->
				<!-- <navigator url="./completedForm" hover-class="navigator-hover"> -->
					<!-- <span> -->
						<!-- <icon-svg icon-class="riqi" />你有4张单据审批通过 -->
						<!-- <icon-svg icon-class="icon-test7" /> -->
					<!-- </span> -->
				<!-- </navigator> -->
			<!-- </view> -->
			<!-- <button class="mini-btn fr" type="default" size="mini">全部确认</button> -->
		<!-- </view> -->
		
		<view class="main">
			<view class="line2" v-for="item in data" :key="item.id">
				<navigator :url="item.path">
				<view class="line21">
					<span class="circle"></span>
					<span style="font-size: 30rpx;">陈赫斯审批中</span>
				</view>
				<view class="line22">
					<span style="margin-left: 30rpx;">{{item.name}}</span>
					<span style="font-weight: 600;" class="fr">￥{{item.money}}</span>
				</view>
				<view class="line23">
					<span>{{item.type}}</span>
					<span>{{item.id}}</span>
				</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[{
					name:'差旅申请',
					money:'2000.00',
					type:'出差申请单',
					id:'S20000006',
					path:'/pages/add/travelApplyBill/travelApplyBillData'
				},{
					name:'差旅费报销',
					money:'2000.00',
					type:'差旅报销单',
					id:'B20000005',
					path:'/pages/add/travelFreeBill/show/index'
				},{
					name:'差旅借款',
					money:'5000.00',
					type:'借款单',
					id:'J20000007',
					path:'/pages/add/loanBill/show/index'
				},{
					name:'报销上海出差',
					money:'703.00',
					type:'出差申请单',
					id:'S20000005',
					path:'/pages/add/travelApplyBill/travelApplyBillData'
				},]
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		padding: 20rpx 30rpx;
		background-color: white;
	}

	.all {
		font-size: 40rpx;
	}

	.header {
		padding-top: 25rpx;
		height: 70rpx;
		width: 100%;
	}

	.circle {
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #1D89E4;
		margin-right: 10rpx;
	}

	.btn{
		height: 60rpx;
	}
	.tag{
		width: auto;
		padding: 5rpx;
		font-size: 35rpx;
		display: inline-block;
		color: #1D89E4;
		background-color: #E7F3FF;
		border-radius: 15rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.mini-btn {
		color: #1D89E4;
		background-color: white;
		height: 60rpx;
		border: 0.5px solid;
		font-size: 35rpx;
		line-height: 60rpx;
	}

	.fr {
		float: right;
	}
	.line2 {
		margin-top: 50rpx;
		font-size: 30rpx;
		margin-bottom: 60rpx;
	}

	.line22 {
		font-size: 35rpx;
		margin-top: 15rpx;
	}
	.line23 {
		margin-left: 30rpx;
		margin-top: 15rpx;
		font-size: 30rpx;
		font-weight: 200;
		color: gray;
	}
</style>
